<script setup lang="ts">
import {ref} from 'vue'
import {onLoad} from "@dcloudio/uni-app";
import {getSetting} from "@/service/api";

const emits = defineEmits()
const goBack = () => {
  emits('goBack')
}
import {useSettingStore} from "@/store";

let bg = ref()
let qrImg = ref()
let title = ref()
const settingStore = useSettingStore()
onLoad(async () => {
  let res = await getSetting()
  bg.value = settingStore.themeColor
  title.value = settingStore.settings.site_title
  qrImg.value = settingStore.settings.site_qr_code
  settingStore.setSetting(res.data)
})

let popup = ref()
const showQr = () => {
  popup.value.open()
}
</script>

<template>
  <uv-sticky custom-nav-height="0">
    <view class="head-bg">
      <view class="p-30rpx flex flex-between items-center">
        <view @click="goBack">
          <uv-icon name="arrow-left" size="24" color="#fff"/>
        </view>
        <view class="text-white font-bold fs-36rpx">{{ title }}</view>
        <view @click="showQr">
          <uv-icon name="more-dot-fill" size="24" color="#fff"/>
        </view>
      </view>
    </view>
  </uv-sticky>
  <uv-popup ref="popup" round="10" mode="center" closeable>
    <view class="p-60rpx">
      <image :src="qrImg" class="qr-img" mode="aspectFit" show-menu-by-longpress/>
    </view>
  </uv-popup>
</template>

<style scoped lang="scss">
.head-bg {
  background-color: v-bind(bg);
}

.qr-img {
  width: 400rpx;
  height: 400rpx;
  margin: 0 auto;
  display: block;
}
</style>